import { useSystemInfo } from "@src/hooks";
import {  View } from "@tarojs/components";
import React, {  useRef, useEffect } from "react";
import { Animated,  StatusBar,  } from "react-native";
import AniScaleIn from "../ani-scale-in";
import Video from "react-native-video";

import "./index.scss";



type Props = {
    onClose: Function,
    onLoad: Function,
    src: string,
    clickElementAnchor?:{x:number,y:number}
    initialSize?:{width:number,height:number}
}

export default function PreviewVideo(props: Props) {
    const { screenWidth,screenHeight } = useSystemInfo();
    
    const { onClose, src, clickElementAnchor = { x:screenWidth / 2,y:screenHeight / 2 } ,initialSize = { width:0,height:0 } } = props;

    const translateX = clickElementAnchor.x - initialSize.width / 2 ;
    const translateY = clickElementAnchor.y + initialSize.height / 2 - screenHeight ;
    const translateValue = useRef(new Animated.ValueXY({ x:translateX,y:translateY }));
    const translateWidth = useRef(new Animated.Value(initialSize?.width));
    const translateHeight = useRef(new Animated.Value(initialSize?.height));

    useEffect(() => {
        StatusBar.setBackgroundColor("rgba(0, 0, 0, 0)");
        StatusBar.setBarStyle("light-content");
        Animated.parallel([
            Animated.timing(translateValue.current, {
                toValue: { x: 0, y: 0 } ,
                useNativeDriver:false,
                duration:300
              }),
              Animated.timing(translateWidth.current, {
                toValue: screenWidth ,
                useNativeDriver:false,
                duration:300

              }),
              Animated.timing(translateHeight.current, {
                toValue:screenHeight ,
                useNativeDriver:false,
                duration:300

              }),
        ]).start();
       return ()=>{
        StatusBar.setBarStyle("dark-content");
       };
    });


    return (
        <Animated.View style={{
            elevation: 1,
            position: "absolute",
            backgroundColor: "#000000",
            width: translateWidth.current,
            height: translateHeight.current,
            left: 0,
            right: 0,
            bottom: 0,
            transform: [{ translateX:translateValue.current.x },{ translateY:translateValue.current.y }]
        }}
        >
            <View className="previewMedia" >
                <View className="previewMedia__closeBtn" onClick={() => { onClose(); }}>close</View>
                <Video className="previewMedia__video"  source={{ uri:src }} onLoadedMetaData={()=>{console.log(1111);}} />
            </View>
        </Animated.View>
    );
}